<style>
    a.detailcontiner span{
        display:none;
    }
    a.detailcontiner:hover span{
        display:initial;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="businesses-advert" lay-title="广告信息">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <!--手风琴-->
                    <div class="layui-collapse">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">学生端展示广告</h2>
                            <div class="layui-colla-content layui-show">
                                <div class="layui-carousel" id="test1">
                                    <div carousel-item id="advert_carousel">
                                    </div>
                                </div>
                                <div>
                                    <div class="layui-form-item febs-hide">
                                        <button id="sortLoopBtn"></button>
                                    </div>
                                    <table lay-filter="collegeTableLoop" id="advertLoopTable" lay-data="{id: 'collegeTableLoop'}"></table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">广告列表</h2>
                            <div class="layui-colla-content">
                                <form class="layui-form layui-table-form" lay-filter="college-table-form">
                                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                                        <legend style="font-size: 15px; font-weight: bolder;">批量查询</legend>
                                    </fieldset>
                                    <div class="layui-row">
                                        <div class="layui-col-md10">
                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label layui-form-label-sm">广告标题</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" name="title" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>

                                                <div class="layui-inline">
                                                    <label class="layui-form-label layui-form-label-sm">广告状态</label>
                                                    <div class="layui-input-inline">
                                                        <select name="statusId">
                                                            <option value=""></option>
                                                            <option value="1">上架</option>
                                                            <option value="2">下架</option>
                                                            <option value="3">草稿</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <label class="layui-form-label layui-form-label-sm">创建人</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" name="userName" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                                            <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action" id="queryadvert">
                                                <i class="layui-icon">&#xe848;</i>
                                            </div>
                                            <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-green-plain table-action" id="resetadvert">
                                                <i class="layui-icon">&#xe79b;</i>
                                            </div>
                                        </div>
                                    </div>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">

                                        <div class="layui-row">


                                            <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action" id="addadvert">
                                                <i class="layui-icon layui-icon-plus-circle">新增</i>
                                            </div>
                                            <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action" id="exportadvert">
                                                <i class="layui-icon layui-icon-export">导出</i>
                                            </div>
                                        </div>
                                    </blockquote>
                                </form>
                                <table lay-filter="advertTable" id="advertTable" lay-data="{id: 'advertTable'}"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="advert_status">
    {{#
    let status = {
    1: {title: '上架',color: 'green'},
    2: {title: '下架',color: 'volcano'},
    3: {title: '草稿',color:'blue'}
    }[d.statusId];
    }}
    <span class="layui-badge febs-bg-{{status.color}}">{{ status.title }}</span>
</script>
<script type="text/html" id="advertLoop-option">
    <a lay-event="open" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-red">&#xe864;</i><span>下架</span></a>
    <a lay-event="loopsort" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-blue">&#xe86d;</i><span>排序</span></a>
</script>

<script type="text/html" id="advert-option">
    <a lay-event="detail" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-green">&#xe7a5;</i><span>详情</span></a>
    {{# if(d.statusId ==1){  }}
    <a lay-event="edit" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-gray">&#xe7a4;</i><span>编辑</span></a>
    {{# } }}
    {{# if(d.statusId !=1){  }}
    <a lay-event="edit" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-blue">&#xe7a4;</i><span>编辑</span></a>
    {{# } }}

    {{# if(d.statusId ==2){  }}
    <a lay-event="open" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-red">&#xe862;</i><span>上架</span></a>
    {{# } }}
    {{# if(d.statusId ==3){  }}
    <a lay-event="open" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-gray">&#xe862;</i><span>上架</span></a>
    {{# } }}
    {{# if(d.statusId ==1){  }}
    <a lay-event="open" class="detailcontiner"><i
            class="layui-icon febs-edit-area febs-red">&#xe864;</i><span>下架</span></a>
    {{# } }}
    {{# if(d.statusId ==1){  }}
    <a lay-event="del" class="detailcontiner"><i class="layui-icon febs-edit-area febs-gray">&#xe7f9;</i><span>删除</span></a>
    {{# } }}
    {{# if(d.statusId !=1){  }}
    <a lay-event="del" class="detailcontiner"><i class="layui-icon febs-edit-area febs-red">&#xe7f9;</i><span>删除</span></a>
    {{# } }}
</script>
<script data-th-inline="none" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'form', 'table', 'febs','element','carousel'], function () {
        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            carousel = layui.carousel,
            element = layui.element,
            dropdown = layui.dropdown,
            $view = $('#businesses-advert'),
            $query = $view.find('#queryadvert'),
            $add = $view.find('#addadvert'),
            $reset = $view.find('#resetadvert'),
            $searchForm = $view.find('form'),
            sortObject = {field: 'createDate', type: null},
            tableIns,
            tableInsLoop,
            loopData;

        form.render();
        initTableLoop();
        initTable();
        exporttable();
        sortBtnclick();

        element.init();//手风琴初始化

        function sortBtnclick() {
            $("#sortLoopBtn").click(function () {
                tableInsLoop.reload();
            });
        }


        /*轮播列表的操作栏*/
        table.on('tool(collegeTableLoop)', function (obj) {
            let data = obj.data,
                advert=data.field,
                layEvent = obj.event;
            if (layEvent === 'open'){
                febs.modal.confirm('修改状态', '确定下架该广告?', function () {
                    changeAdvertStatus(data.advertId);
                });
            }
            if (layEvent === 'loopsort') {
                febs.modal.open('广告排序', 'advert/loopSort/'+data.id, {
                    //area: $(window).width() <= 750 ? '90%' : '50%',
                    area: ['30%', '50%'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        $('#advertLoop-sort').find('#advert_Id').val(data.advertId);
                        $('#advertLoop-sort').find('#submit').trigger('click');
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                });
            }
        });

        table.on('tool(advertTable)', function (obj) {
            let data = obj.data,
                advert=data.field,
                layEvent = obj.event;
            if (layEvent === 'detail') {
                febs.modal.view('广告信息', 'advert/detail/' + data.id, {
                    area: $(window).width() <= 750 ? '95%' : '50%',
                    btn: ['关闭'],
                    yes:function () {
                        layer.closeAll();
                    }
                });
            }
            if (layEvent === 'del') {
                if (data.statusId==1){
                    return false;
                }
                febs.modal.confirm('提示', '确定删除该广告？', function () {
                    deleteAdvert(data.id);
                });
            }
            if (layEvent === 'edit') {
                if (data.statusId==1){
                    return false;
                }
                febs.modal.open('修改广告', 'advert/update/' + data.id, {
                    area: $(window).width() <= 750 ? '95%' : '50%',
                    btn: ['提交', '取消'],
                    yes: function (index, layero) {
                        $('#advert-update').find('#submit').trigger('click');
                        tableInsLoop.reload();
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                });
            }
            if (layEvent === 'open'){
                if (data.statusId==3){
                    return false;
                }
                if (data.statusId==1){
                    febs.modal.confirm('提示', '确定下架该广告?', function () {
                        changeAdvertStatus(data.id);
                    });
                }else{
                    febs.modal.confirm('提示', '确定上架该广告？', function () {
                        changeAdvertStatus(data.id);
                    });
                }
            }
        });

        table.on('sort(advertTable)', function (obj) {
            sortObject = obj;
            tableIns.reload({
                initSort: obj,
                where: $.extend(getQueryParams(), {
                    field: obj.field,
                    order: obj.type
                })
            });
        });

        $query.on('click', function () {
            let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            tableIns.reload({where: params, page: {curr: 1}});
        });

        $add.on('click', function () {
            febs.modal.open('新增广告', 'advert/add', {
                btn: ['创建','草稿','广告预览', '重置'],
                area: $(window).width() <= 750 ? '95%' : '100%',
//                area: ['100%', '100%'],
                yes: function (index, layero) {
                    $('#advert-add').find('#status_Id').val(2);
                    $('#advert-add').find('#submit').trigger('click');


                },
                btn2: function () {
                    $('#advert-add').find('#status_Id').val(3);
                    $('#advert-add').find('#submit').trigger('click');
                    // 单击之后提交按钮不可选,防止重复提交
                    var DISABLED = 'layui-btn-disabled';
                    // 增加样式
                    $('#advert-add').find('#submit').addClass(DISABLED);
                    // 增加属性
                    $('#advert-add').find('#submit').attr('disabled', 'disabled');
                    return false;
                },
                btn3: function () {
                        $('#advert-add').find('#advert_phone_btn').trigger('click');
                    return false;
                },
                btn4: function () {
                    $('#advert-add').find('#reset').trigger('click');
                    $('#advert-add').find('#reset_time').trigger('click');
                    return false;
                }
            });
        });

        $reset.on('click', function () {
            $searchForm[0].reset();
            sortObject.type = 'null';
            tableIns.reload({where: getQueryParams(true), page: {curr: 1}, initSort: sortObject});
        });

        function initTable() {
            tableIns = febs.table.init({
                elem: $view.find('#advertTable'),
                id: 'advertTable',
                url: ctx + 'advert/list',
                cols: [[
                    {field:'id',            title:'编号',                   width: 100,   align: 'center'},
                    {field: 'title',        title: '广告标题'},
                    {field: 'company',      title: '公司',                  minWidth: 50},
                    {field: 'userName',     title: '创建人',                minWidth:80},
                    {field: 'createTime',   title: '创建时间',              minWidth: 180, sort:true},
                    {title: '广告状态',     templet: '#advert_status',      width:150,     align: 'center'},
                    {title: '操作',         toolbar: '#advert-option',     minWidth: 140}
                ]]
            });
        }
        function initTableLoop(){
            tableInsLoop = febs.table.init({
                elem: $view.find('#advertLoopTable'),
                id: 'collegeTableLoop',
                url: ctx + 'advert/looplist',
                page: false,
                done:function(res, curr, count){
                    console.log(res.data);

                    var str ="";
                    for(var i=0;i<res.data.length;i++){
                        var imgUrl =res.data[i].imgUrl;
                        str= str+"<img src="+imgUrl+" />";
                    }
                    $("#advert_carousel").html(str);
                    carousel.render({ //轮播图设置
                        elem: '#test1'
                        ,width: '100%' //设置容器宽度
                        ,arrow: 'always' //始终显示箭头
                    });
                },
                cols: [[
                    {field:'id',            title:'序号',     width: 100,align: 'center'},
                    {field:'advertId',      title:'广告ID',   hide:true},
                    {field:'imgUrl',        title:'广告图片',  hide:true},
                    {field: 'title',        title: '广告标题'},
                    {field: 'userName',     title: '创建人',   minWidth:80},
                    {field: 'createTime',   title: '创建时间', minWidth: 180},
                    {title: '操作',         toolbar: '#advertLoop-option', minWidth: 140}
                ]]
            });
        };

        /*导出按钮*/
        function exporttable(){
            $("#exportadvert").click(function () {
                let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
                params.pageSize = $view.find(".layui-laypage-limits option:selected").val();
                params.pageNum = $view.find(".layui-laypage-em").next().html();
                febs.download(ctx + 'advert/excel', params, '广告信息表.xlsx');
            });
        }

        function getQueryParams(flag) {
            let params = $searchForm.serializeJson();
            return params;
        }

        function deleteAdvert(advertId) {
            febs.get(ctx + 'advert/delete/' + advertId, null, function () {
                febs.alert.success('删除广告成功');
                $query.click();
            });
        }
        function changeAdvertStatus(advertId){
            febs.get(ctx + 'advert/changeStatus/'+ advertId ,null, function () {
                febs.alert.success('广告修改成功');
                $query.click();
                tableInsLoop.reload();
            });
        }
    })
</script>

